<template>
  <div>
    <div class="xunlianjihua" v-for="item in info" :key="">
      <router-Link to="/plandetail"><div class="jihua_picture" @click="get_planid(item.id)"><img class="jihua_picture_main" :src="item.picture" height="151" width="276"/></div></router-Link>
      <div class="jihuajieshao">
        <p class="name">{{item.name}}</p>
        <p class="jihua_tiaozhuan">{{item.biaoyu}}</p>
        <p><span>课时：{{item.week}}周</span><span>天/周：{{item.day_everyweek}}天</span></p>
        <div class="frequency">强度：
          <img class="full_water" v-for="i in (item.grade_level)" src="../../img/满水滴.png" height="16" width="21"/>
          <img v-for="i in (item.no_grade_level)" src="../../img/水滴.png" height="15" width="20"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PlanShow",
    data() {
      return {
        info: [
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/b3c787f7b6ad60524a90e03df452c47a.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          },
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/b84036b71b5f8ae4d18d518d7e22023c.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          },
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/b5b16610a9fe62bc8a7c98b9b617607a.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          },
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/c56d54d3827ecf50dac44654fb15c21d.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          },
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/3dea6c54477abac09a87614761e7cbd4.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          },
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/b3c787f7b6ad60524a90e03df452c47a.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          },
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/b3c787f7b6ad60524a90e03df452c47a.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          },
          {
            "img_url": "https://w2.dwstatic.com/yy/ojiastoreimage/b3c787f7b6ad60524a90e03df452c47a.jpg?imageview/0/w/222/h/122",
            "name": "计划1",
            "biaoyu": "标语1",
            "week": "5",
            "day": "5"
          }
        ],
      }
    },computed: {
     plan() {
        return this.$store.state.plan
      }
    },
    watch: {
      plan: function () {
        this.info=this.$store.state.plan
      }
    }
    ,methods:{
      get_planid:function (id) {
        console.log(id);
        this.$store.state.click_index_planid=id
      }
    }
  }
</script>

<style scoped>

  a{
    color: black;
  }
  .xunlianjihua{
    padding-left: 10px;
    background: white;
    width: 590px;
    height: 160px;
    margin-bottom: 1px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.3s;

  }
  .xunlianjihua:hover{
    box-shadow: 0px 0px 10px gray;

  }
  .xunlianjihua .jihua_picture{
    margin-top: 4px;
    width: 290px;
    height: 151px;
    float: left;
    margin-right: 10px;
    overflow: hidden;
  }
  .xunlianjihua .jihua_picture img{
    width:100%
  }
  .xunlianjihua .jihua_picture img:hover{

    transition: 1s;
    transform: scale(1.1);
  }
  .xunlianjihua .jihuajieshao{

    width: 230px;
    height: 160px;
    float: left;
  }

  .xunlianjihua .jihuajieshao .name{
    margin-top: 4px;
    font-size: 20px;
    width: 300px;
    font-family:Arial,Helvetica,sans-serif;
  }

  .jihua_tiaozhuan{
    width: 250px;
    font-size: 13px;
    height: 80px;
    font-family:Arial,Helvetica,sans-serif;
  }
  .jihuajieshao p span{
    margin-right: 20px;
    font-family:Arial,Helvetica,sans-serif;
  }
  .full_water{
    position: relative;
    top: 1px;
  }
  .frequency img{
    box-sizing: border-box;
  }
</style>
